{% extends 'backstage/layout/layout.html' %}
{% block title %}
    管理员管理-py1902博客管理系统
{% endblock %}

{% block keywords %}
    管理员管理-py1902博客管理系统
{% endblock %}

{% block description %}
    管理员管理-py1902博客管理系统
{% endblock %}

{% block daohang %}
    管理员管理
    <span class="c-gray en">&gt;</span>
    管理员列表
{% endblock %}

{% block article %}
    <article class="cl pd-20">
        <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a href="javascript:;" onclick="member_add('添加管理员','/manager/member_add/','600','370')"
               class="btn btn-primary radius">
                <i class="Hui-iconfont">&#xe600;</i> 添加管理员
            </a>
        </span>
            <span class="r">共有数据：<strong>{{ count }}</strong> 条</span>
        </div>
        <table class="table table-border table-bordered table-bg">
            <thead>
            <tr class="text-c">
                <th width="40">序号</th>
                <th width="150">账号</th>
                <th width="90">手机</th>
                <th width="150">邮箱</th>
                <th width="130">加入时间</th>
                <th width="100">状态</th>
                <th width="100">操作</th>
            </tr>
            </thead>
            <tbody>
            {% for item in manager %}
                <tr class="text-c">
                    <td>{{ forloop.counter }}</td>
                    <td>{{ item.account }}</td>
                    <td>{{ item.mobile }}</td>
                    <td>{{ item.email }}</td>
                    <td>{{ item.login_time }}</td>
                    <td class="td-status" id="{{ item.id }}">
                        {% if item.state %}
                            <span style="cursor: pointer" class="label label-success radius">已启用</span>
                        {% else %}
                            <span style="cursor: pointer" class="label label-error radius">已禁用</span>
                        {% endif %}
                    </td>

                    <td class="td-manage">
                        <a title="编辑" href="javascript:;" onclick="member_edit('管理员编辑','/manager/member_edit/?id={{ item.id }}','800','500')"
                           class="ml-5" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="member_del(this,'1')" class="ml-5"
                           style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>

                </tr>
            {% endfor %}
            </tbody>
        </table>
    </article>
{% endblock %}

{% block autoScript %}
    <script>
        /*
        参数解释：
        title	标题
        url		请求的url
        id		需要操作的数据id
        w		弹出层宽度（缺省调默认值）
        h		弹出层高度（缺省调默认值）
    */
        /*管理员-增加*/
        function member_add(title, url, w, h) {
            var index = layer.open({
                // 跟着系统走
                type: 2,
                // 设置弹出页的宽高
                area: [w + 'px', h + 'px'],
                // 设置标题
                title: title,
                // 设置路由
                content: url
            })
            // layer_show(title, url, w, h);
        }

        /*
        管理员-停用
        $(".td-status span")JQ的获取标签方式
        获取到页面中所有类名为.td-status的span标签
        */
        $(".td-status span").click(function () {
            console.log($(".td-status span"));
            // 获取点击的soan对应的管理员的id
            var id = $(this).parent('td').attr('id');
            // 对获取到的id进行判断，避免手动输入不存在的id扰乱数据库数据
            if (id == '') {
                /*
                layer插件的方法
                icon,图标layer自带的图标样式
                time，弹出款的持续时间,单位毫秒
                */
                layer.msg('请选择要操作的管理员！', {icon: 2, time: 2000})
            }
            // 下面要用到当前的对象，但是不提前获取到的话，会导致下面的函数中的this指向别的对象
            var that = this;
            /*
            JQ中ajax发送get请求的方法
            将当前对象的id值传入到后端
            通过函数获取到后端传来的数据
            规定后端传来数据的格式
            */
            $.get('/manager/member_change_state/', {id: id}, function (data) {
                console.log(data);
                // 对服务器传来的数据是否为空
                if (data.data[0]) {
                    // 启用时改变span的值和class
                    $(that).text('已启用').removeClass('label-error').addClass('label-success')
                } else {
                    // 禁用时改变span的值和class
                    $(that).text('已禁用').removeClass('label-success').addClass('label-error')
                }
            }, 'json')
        });


        /*管理员-删除*/
        function member_del(obj, id) {
            layer.confirm('确认要删除吗？', function (index) {
                //此处请求后台程序，下方是成功后的前台处理……
                $.ajax({
                    type: 'get',
                    url: '/manager/member_del/',
                    data: {id: id},
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == 0) {
                            $(obj).parents("tr").remove();
                            layer.msg('已删除!', {icon: 1, time: 1000});
                        } else {
                            layer.msg(data.msg, {icon: 5, time: 1000});
                        }
                    },
                    error: function (data) {
                        console.log(data.msg);
                    }
                });

            });
        }

        /*管理员-编辑*/
        function member_edit(title,url,w,h){
            var index = layer.open({
                type: 2,
                area:[w+'px',h+'px'],
                title: title,
                content: url
            });
        }

        // 当页面加载完成以后触发内部的匿名函数
        $(function(){
            //让后台左侧的系统管理 展开
            $('#menu-system').find('dt').click();
        })
    </script>
{% endblock %}